<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>Bone</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<%@ include file="/common/css.jsp"%>
<!-- END GLOBAL MANDATORY STYLES -->
<link href="${ctx}/resource/css/promo.css"
	rel="stylesheet" type="text/css" />
<link href="${ctx}/resource/css/animate.css"
	rel="stylesheet" type="text/css" />
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed page-full-width">
	<!-- BEGIN HEADER -->
	<%@ include file="/common/header.jsp"%>
	<!-- END HEADER -->

	<!--content start-->
	<div class="tab-pane row-fluid profile-account" id="tab_1_3"
		style="margin-top: 40px">

		<div class="row-fluid">
			<div class="span2"></div>
			<div class="span8">
				<h3 class="page-title">投票</h3>
				<ul class="breadcrumb">
					<li><i class="icon-home"></i> <a
						href="${ctx}/vote/index.do">首页</a>
						<i class="icon-angle-right"></i></li>
					<li><a href="#">投票</a></li>
				</ul>
			</div>
		</div>
		<div class="row-fluid">
			<div class="span2"></div>
			<div class="span8" style="min-height: 630px">
				<!-- BEGIN SAMPLE FORM PORTLET-->
				<div class="portlet box blue">
					<div class="portlet-title" style="padding: 0px 1px 1px 1px;">

					</div>
					<div class="portlet-body form">
						<!-- BEGIN FORM-->
						<form id="voteForm" class="form-horizontal"
							onsubmit="return false;">
							<input type="hidden" name="topicId"
								value="${requestScope.topicId}">
							<div class="control-group">
								<img
									src="${ctx}/${requestScope.topic.advert}"
									style="height: 200px; width: 100%;">
							</div>

							<c:if test="${requestScope.topic.type == 0}">
								<div class="portlet box blue ">

									<div class="portlet-title" style="height: 25px">
										<i class="icon-reorder"></i> <span>${requestScope.topic.title}</span>
									</div>
									<div class="portlet-body form">
										<input type="hidden" id="topicType" name="type" value="0">
										<div class="control-group">
											<%-- <label class="control-label">
                            	<c:out value="${requestScope.topic.title}">
                            	</c:out>
                            </label> --%>
											<div class="controls">
												<c:forEach items="${requestScope.optionList}" var="opt">
													<label class="radio line"> <input type="radio"
														name="oids" value="${opt.oid}" />${opt.content}
													</label>
												</c:forEach>
											</div>
										</div>
									</div>
								</div>
							</c:if>
							<c:if test="${requestScope.topic.type == 1}">
								<div class="portlet box blue">
									<div class="portlet-title" style="height: 25px">
										<i class="icon-reorder"></i> <span>${requestScope.topic.title}</span>
									</div>
									<div class="portlet-body form">
										<input type="hidden" id="topicType" name="type" value="1">
										<div class="control-group">
											<%-- <label class="control-label">${requestScope.topic.title}</label> --%>
											<div class="controls">
												<div class="row-fluid">
													<div class="span12">
														<c:forEach items="${requestScope.optionList}" var="opt">
															<label class="checkbox line"> <input
																value="${opt.oid}" type="checkbox">
																${opt.content}
															</label>
														</c:forEach>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</c:if>
							<div class="form-actions">
								<button id="voteBtn" class="btn blue">投票</button>
								<span class="btn green" style="cursor: default">投票截止时间：<fmt:formatDate
										value="${requestScope.topic.deadline}" type="both" />
								</span>
							</div>
						</form>
						<!-- END FORM-->
					</div>
				</div>
				<!-- END SAMPLE FORM PORTLET-->


			</div>
		</div>
	</div>
	<!--end tab-pane-->

	<!-- BEGIN FOOTER1 -->
	<%@ include file="/common/footer.jsp"%>
	<!-- END FOOTER -->
	<!-- BEGIN JAVASCRIPTS -->
	<!-- BEGIN CORE PLUGINS -->
	<%@ include file="/common/js.jsp"%>
	<!-- END CORE PLUGINS -->
	<script src="${ctx}/resource/js/app.js"></script>
	<script>
    jQuery(document).ready(function() {
        App.init();
        jQuery('#promo_carousel').carousel({
            interval: 10000,
            pause: 'hover'
        });
    	<c:if test="${requestScope.topic == null}">
		   	layer.alert('您所访问的投票主题不存在或已被删除', {icon: 3}, function(idx){
		   		window.location.href = '${ctx}/vote/index.do';
			});
		   	return;
    	</c:if>
        
        $("#voteBtn").click(function(){
        	var datas = $("#voteForm").serialize();
        	if($('#topicType').val() == "1") {
        		//多选表单
        		var oidVals = "";
     		    $(".checked").each(function(){
       	          	oidVals = $(this).context.firstChild.value + "," + oidVals;
        		});
     		    if(oidVals == "") {
     		    	layer.msg('请先选择投票项！');
     		    }
     		    datas = datas + "&oids="+oidVals;
        	}
    		$.ajax({
    			type: "POST",
    			url: "${ctx}/vote/saveCheckVoteHistory.do",
    			data: datas,
    			dataType:"json",
                success: function(data) {
                	if(data) {
                		layer.alert(data.msg, function(idx){
                			if(data.success) {
                				window.location.href = '${ctx}/vote/statisticsPage.do?topicId=${requestScope.topicId}';
                			} else if(data.url) {
                   				window.location.href = data.url;
                			}
                			layer.close(idx);
                		});
                	} else {
                		layer.alert("投票异常！");
                	}
                }
            });

    	});
    });
</script>
	<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>